﻿<template>
  <div class="trade-list"  v-if="record.result">
   
    <div class="trade-main">
      <h2 class="clearfix">
        <div class="pull-left">请点击 <img src="./img/pointer.png" alt="">下图中的隐患点</div>
        <!--.t[0].coord.length-->
        <div class="pull-right">{{index}} / {{ record.t[0].coord.length }}</div>
      </h2>
      <h3>
        <span>第{{Number(this.$route.params.index)+1}}题</span>
        <img src="./img/refresh.png" alt="" @click="reload">
 <img class="trade-img" :src="IMG_1 + record.t[0].fid + IMG_2" alt="" style="position:absolute;top:12rem;">
      </h3>
      <div class="img-container" id="img-container">
        <div @click="error($event)">
          <img class="trade-img" :src="IMG_1 + record.t[0].fid + IMG_2" alt="">
          <div class="coord" v-for="(item, index) in record.t[0].coord"
               :style="'left:' + item.x * scaling + 'px;top:' + item.y * scaling + 'px;width:' + item.w * scaling + 'px;height:' + item.h * scaling +'px;'"
              @click.stop="success($event,index)">
          </div>
        </div>
      </div>
      <div class="message" v-if="message"><b>茬点解析：</b>{{message}}</div>
      <div class="btn">
        <img v-if="fulfilFlag == 1"  @click="nextQuestion" src="./img/next-btn.png" alt="" width="160">
        <router-link v-if="fulfilFlag == 2"  to="/type-list" >
          <img src="./img/finish-btn.png" alt="" alt="" width="160">
        </router-link>
      </div>
    </div>
	 <div class='provideUser' v-if='record.weChatName' >该关卡由用户<span>{{record.weChatName}}</span>
      	<img :src="record.weChatUrl" style="width: 5rem;"/>
      	提供。</div>
	      <img src="./img/back.png" alt="" @click="$router.back(-1)"  style="float:left;" />
  </div>
</template>

<script>

  import errImgUrl from '@/components/trade-list/img/error.png'
  import {IMG_1, THREAT, IMG_2, COUNT} from '@/api/index'
  export default {
    name: "trade-list",
    data() {
      return {
        record : {},
        index: 1,
        IMG_1,
        IMG_2,
        message : '',
        fulfilFlag : 0,
        counts: 0
      }
    },
    methods:{
      reload(){
        window.location.reload()
      },
      error(e){
        var img = new Image();
        var imgContainer = document.getElementById('img-container');
        img.src = errImgUrl;
        img.style.position = 'absolute';
        img.style.left = e.pageX - 30 + 'px';
        img.style.top = e.pageY - 30 + 'px';
        imgContainer.appendChild(img);
        setTimeout(() => {
          imgContainer.removeChild( img );
        },1000)
      },
      success(e,index){
        var target = e.srcElement;
        var indexOf = Array.prototype.indexOf;
        if( indexOf.call(target.classList,'coord') < 0 ){
          target = e.srcElement.parentNode;
        }
        if( indexOf.call(target.classList,'active') < 0 ) {
          if( this.index === this.record.t[0].coord.length ){
            if( this.$route.params.index < (this.counts - 1) ){
              this.fulfilFlag = 1;
            } else{
              this.fulfilFlag = 2;
            }
          }else{
            this.index ++ ;
          }
          this.message = this.record.t[0].coord[index].resolve;
          target.classList.add('active');
        }
      },
      init(that){
        that.$ajax.get(THREAT + this.$route.params.type + '&index=' + this.$route.params.index)
          .then(function(res){
            that.record = res.data;
          })
          .catch(function(res){
            console.log( res );
          })
      },
      nextQuestion(){
        var params = this.$route.params;
        var objs = document.querySelectorAll('.coord');
        for( let i = 0; i < objs.length; i++ ){
          objs[i].classList.remove('active');
        }
        this.message = '';
        this.fulfilFlag = 0;
        this.index = 1;
        setTimeout(() => {
          this.$router.push({path: '/trade-list/' + params.type + '/' + ++params.index});
        },300)
      }
    },
    computed:{
      scaling(){
        return (document.body.clientWidth - 40) / this.record.t[0].width
      }
    },
    created(){
      var that = this;
      this.init(that);
      that.$ajax.get(COUNT + this.$route.params.type)
        .then(function (res) {
          that.counts = res.data.t[0].count;
        })
        .catch(function (res) {
          console.log(res);
        })
    },
    watch:{
      '$route'(to,from){
        this.init(this);
      }
    }
  }
</script>

<style scoped lang="less">
  .trade-list {
    height: 100%;
    background: url("img/bg.jpg") no-repeat center center;
    background-size: 100% 100%;
	overflow-y:scroll;
	.provideUser{
  		display: flex;
  		float:left;
  		width:100%;
  		align-items: center;
  		font-size: 2rem;
  		span{
  			color: red;
  		}
  		img{
  			margin:0 1rem;
  			border-radius:50%;
  		}
  	}
    .message{
      padding:10px;
      line-height: 24px;
      font-size:14px;
      b{
        color:red;
      }
    }
    .trade-main {
      padding: 20px 10px;
     
      h2 {
        line-height: 24px;
        margin-bottom:15px;
        font-weight: normal;
        color: #4b4b4b;
        font-size: 16px;
        img{
          vertical-align: middle;
        }
      }
      h3{
        line-height:30px ;
        text-align: center;
        font-size:18px;
        color:#fff;
        margin:10px 0;
        img{
          width: 16px;
          height: 16px;
          cursor: pointer;
          margin-top: 8px;
          float: right;
        }
      }
    }
    .img-container{
      padding:10px;
      background: #fff;
      > div{
        position:relative;
        .coord{
          position:absolute;
          &:before{
            content: '';
            display: block;
            height:100%;
            width:100%;
            transition: all 0.5s;
            box-sizing: border-box;
            opacity: 0;
            border:2px solid #64ff00;
          }
          &:after{
            content:'';
            display: block;
            margin-top:-30px;
            margin-left:-30px;
            height:60px;
            width:60px;
            position:absolute;
            left:50%;
            top:50%;
            background: url("./img/success.png") no-repeat center center;
            opacity: 0;
            transition: all 0.5s;
          }
          &.active{
            &:before{
              opacity: 1;
            }
            &:after{
              opacity: 1;
            }
          }
        }
      }
      .trade-img{
        display: block;
        width:100%;
      }
    }
    .btn{
      background: none;
      border:none;
      outline: none;
      padding-bottom: 7rem;
      img{
        display: block;
        margin:10px auto;
      }
    }
  }
</style>
